<div class='checkout-confirm-order-details w-100 d-flex flex-wrap' data-hook>
  <div class="checkout-confirm-delivery-informations text-left mt-3">
    <div class="d-lg-none checkout-confirm-delivery-informations-header">
      <%= Spree.t(:delivery_information) %>
    </div>
    <dl>
      <% if order.has_step?("address") %>
        <div data-hook="order-ship-address">
          <dt class="text-uppercase">
            <%= Spree.t(:shipping_address) %>
            <%= checkout_edit_link %>
          </dt>
          <%= render 'spree/shared/address', address: order.ship_address %>
        </div>
        <div data-hook="order-bill-address">
          <dt class="text-uppercase">
            <%= Spree.t(:billing_address) %>
            <%= checkout_edit_link %>
          </dt>
          <%= render 'spree/shared/address', address: order.bill_address %>
        </div>
      <% end %>
      <% if order.has_step?("delivery") %>
        <div data-hook="order-shipment">
          <dt class="text-uppercase">
            <%= Spree.t(:shipping) %>
            <%= checkout_edit_link('delivery') %>
          </dt>
          <% @order.shipments.valid.each do |shipment| %>
            <dd><%= shipment.shipping_method&.name %> </dd>
          <% end %>
          <%= render 'spree/shared/shipment_tracking', order: order if order.shipped? %>
        </div>
      <% end %>
      <% if order.has_step?("payment") %>
        <div data-hook="order-payment">
          <dt class="text-uppercase">
            <%= Spree.t(:payment) %>
            <%= checkout_edit_link('payment') %>
          </dt>
          <dd>
            <%= render collection: @order.payments.valid, partial: 'spree/shared/payment' %>
          </dd>
          <dd>
            <% if !@order.complete? && @order.using_store_credit? %>
              <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
            <% end %>
          </dd>
        </div>
      <% end %>
    </dl>
  </div>

  <div class="checkout-confirm-order-details-line-items d-flex flex-column mt-5 mr-md-4">
    <div class="checkout-confirm-order-details-line-items-header d-none d-sm-block d-lg-none align-self-start mb-3">
      <%= Spree.t(:products) %>
    </div>
    <div class="d-table" data-hook="order_details">
      <div class="d-none d-lg-table-row text-secondary text-uppercase" data-hook="order_details_line_items_headers">
        <p class="d-table-cell pb-1">
          <%= Spree.t(:product) %>
        </p>
        <p class="d-table-cell pb-1">
          <%= Spree.t(:price) %>
        </p>
        <p class="d-table-cell pb-1">
          <%= Spree.t(:quantity) %>
        </p>
        <p class="d-table-cell pb-1">
          <%= Spree.t(:total) %>
        </p>
      </div>
      <% @order.line_items.each do |item| %>
        <div class="checkout-confirm-order-details-line-items-line-item w-100 d-table-row" data-hook="order_details_line_item_row">
          <div class="checkout-confirm-order-details-line-items-line-item-name d-table-cell align-middle py-3 py-sm-4">
            <div class="d-flex align-items-lg-center">
              <div class="checkout-confirm-order-details-line-items-line-item-name-image" data-hook="order_item_image">
                <%= link_to product_image(item.variant), spree.product_path(item.product) %>
              </div>
              <div class="d-flex flex-column mt-2 mt-lg-0" data-hook="order_item_description">
                <div data-hook="order_item_name">
                  <%= link_to item.name, spree.product_path(item.product), class: 'checkout-confirm-order-details-line-items-line-item-name-link' %>
                </div>
                <% unless item.variant.is_master? %>
                  <ul class="checkout-confirm-order-details-line-items-line-item-name-options text-uppercase list-unstyled mb-0">
                    <% item.variant.option_values.sort { |ov| ov.option_type.position }.each do |ov| %>
                    <li>
                      <% # TODO: rework option values so options_text method can be used here %>
                      <%= "#{ov.option_type.presentation}: #{ov.name.titleize}" %>
                    </li>
                  <% end %>
                  </ul>
                <% end %>
                <div class="d-lg-none" data-hook="order_item_price">
                  <div class="font-weight-bold"><%= item.single_money.to_html %></div>
                </div>
                <div class="d-lg-none" data-hook="order_item_qty">
                  <span><%= Spree.t(:quantity) %>:</span>
                  <span class="font-weight-bold"><%= item.quantity %></span>
                </div>
              </div>
            </div>
          </div>
          <div class="checkout-confirm-order-details-line-items-line-item-price d-none d-lg-table-cell align-middle py-4" data-hook="order_item_price">
            <div><%= item.single_money.to_html %></div>
          </div>
          <div class="checkout-confirm-order-details-line-items-line-item-quantity d-none d-lg-table-cell align-middle py-4" data-hook="order_item_qty">
            <span class="checkout-confirm-order-details-line-items-line-item-quantity-val d-lg-block"><%= item.quantity %></span>
          </div>
          <div class="checkout-confirm-order-details-line-items-line-item-total d-none d-lg-table-cell align-middle py-4" data-hook="order_item_total">
            <div><%= item.display_total.to_s %></div>
          </div>
        </div>
      <% end %>
    </div>
  </div>

  <div class="mt-5" id="checkout-summary" data-hook="checkout_summary_box">
    <%= render partial: 'spree/checkout/summary', locals: { order: @order } %>
    <% unless @order.complete? %>
      <div data-hook="buttons">
        <% submit_label_key = @order.confirm? ? :place_order : :save_and_continue %>
        <%= submit_tag Spree.t(submit_label_key), class: 'btn btn-primary text-uppercase font-weight-bold w-100 checkout-content-save-continue-button' %>
      </div>
    <% end %>
  </div>
</div>
